<template>
    <view class="blurBg">
        <up-navbar title=" " :safeAreaInsetTop="true" bgColor="transparent" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback" color="#000"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome" color="#000"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="flex justify-between items-center mx-[30rpx] mb-[20rpx]">
            <view class=" text-[32rpx] text-[#333] font-normal pl-[8rpx]">{{ Stores.name }}</view>
            <view class="flex items-center bg-[#DEEEFB] py-[10rpx] px-[32rpx] rounded-[16rpx] " @click="ScanQRCodes">
                <image src="../static/saoma.png" mode="scaleToFill" class="w-[40rpx] h-[40rpx] block"/>
                <view class="color-[#333] text-[24rpx] font-normal ml-[16rpx]">扫码核销</view>
            </view>
        </view>
        <view class="BgBlur my-[30rpx]">
            <view class="tm flex items-center">
                <view @click="toLink" class="flex-1 flex flex-col items-center justify-between h-[148rpx] py-[24rpx]">
                    <view class="text-[#fff] text-[26rpx] font-normal mb-[26rpx]">总收益</view>
                    <view class="text-[#fff] text-[30rpx] font-normal">￥{{ Stores.salesAmount }}</view>
                </view>
                <up-line color="#fff" direction="col" length="100%"></up-line>
                <view class="flex-1 flex flex-col items-center justify-between h-[148rpx] py-[24rpx]">
                    <view class="text-[#fff] text-[26rpx] font-normal mb-[26rpx]">今日收益</view>
                    <view class="text-[#fff] text-[30rpx] font-normal">￥{{ Stores.dayAmount }}</view>
                </view>
            </view>
        </view>
        <view class="m-[30rpx] bg-[#fff] p-[8rpx] rounded-[24rpx] flex items-center justify-between">
            <view v-for="(item,index) in list" :key="index" :class="item.value == current ? 'active' : ''" class="py-[8rpx] w-[125rpx] text-[28rpx] text-[#6d6d6d] font-normal text-center rounded-[16rpx]" @click="tabcheck(item.value)">{{ item.name }}</view>
        </view>
        <template v-for="(item,index) in orderList" :key="index">
            <view class="m-[30rpx] bg-[#fff] px-[30rpx] rounded-[16rpx]">
                <view class="pt-[30rpx] pb-[20rpx]">
                    <view class="flex items-center justify-between mb-[20rpx]">
                        <view class="flex items-center">
                            <view class="text-[22rpx] text-[#878787] font-normal mr-[4rpx]">订单编码：</view>
                            <view class="text-[22rpx] text-[#333] font-normal">{{ item.orderSn }}</view>
                            <view class="py-[10rpx] px-[14rpx] bg-[#F7F8FA] rounded-[40rpx] text-[18rpx] text-[#333] font-noraml">复制</view>
                        </view>
                        <view class="text-[22rpx] text-[#999] font-normal">{{ statusType(item.status) }}</view>
                    </view>
                    <view class="text-[18rpx] text-[#878787] font-normal">{{ item.createTime }}</view>
                </view>
                <up-line></up-line>
                <view class="pb-[30rpx]">
                    <view class="flex items-center pt-[20rpx] pb-[24rpx]">
                        <view class="text-[30rpx] text-[#000] font-bold mr-[16rpx]">下单店铺名称</view>
                        <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">商家收入</view>
                        <view class="text-[24rpx] text-[#666] font-normal">￥{{ item.storeAmount }}</view>
                    </view>
                    <view class="flex items-center mb-[30rpx]">
                        <image src="../static/address.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block mr-[8rpx]"/>
                        <view class="text-[24rpx] text-[#999] font-normal">{{ item.province }} {{ item.city }} {{ item.area }} {{ item.address }}</view>
                    </view>
                    <view class="flex justify-between items-center p-[12rpx] bg-[#F7F8FA] rounded-[16rpx] mb-[20rpx]">
                        <view class="flex items-center">
                            <image :src="item.user?.avatar ? item.user?.avatar : ''" mode="scaleToFill" class="w-[60rpx] h-[60rpx] block mr-[12rpx] rounded-[30rpx]"/>
                            <view class="text-[24rpx] text-[#333] font-normal mr-[20rpx]">{{ item.user?.nickName }}</view>
                            <view class="text-[24rpx] text-[#666] font-normal mr-[8rpx]">实付金额</view>
                            <view class="text-[24rpx] text-[#666] font-normal">￥{{ item.payPrice }}</view>
                        </view>
                        <view class="text-[24rpx] text-[#333] font-normal">订单详情></view>
                    </view>
                    <view v-if="item.shipType == 1 && item.status == 1" class="bg-[#F7F8FA] rounded-[16rpx] py-[30rpx] px-[90rpx] flex justify-center">
                        <image @click="checkShow(item.orderId)" src="../static/fh.png" mode="scaleToFill" class="w-[192rpx] h-[56rpx] block"/>
                    </view>
                    <view v-else-if="item.shipType == 1 && (item.status == 4 || item.status == 5)" class="bg-[#f7f8fa] rounded-[16rpx] p-[30rpx] flex items-center">
                        <view class="mr-[24rpx] color-[#333] text-[24rpx] font-normal">快递信息</view>
                        <view class="color-[#666] text-[24rpx] font-normal">{{ item.shipSn }}</view>
                    </view>
                    <view v-else-if="item.shipType == 2 && (item.status == 3 || item.status == 4 || item.status == 5)" class="bg-[#F7F8FA] rounded-[16rpx] py-[30rpx] px-[30rpx]">
                        <view class="flex justify-between mb-[20rpx]">
                            <view class="w-[260rpx] flex items-center">
                                <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">骑手配送费</view>
                                <view class="text-[24rpx] text-[#46a7fd] font-bold">￥8</view>
                            </view>
                            <view class="w-[260rpx] flex items-center">
                                <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">配送状态</view>
                                <view class="text-[24rpx] text-[#46a7fd] font-normal">配送中</view>
                            </view>
                        </view>
                        <view class="flex justify-between">
                            <view class="w-[260rpx] flex items-center">
                                <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">接单人</view>
                                <view class="text-[24rpx] text-[#666] font-normal">XXX</view>
                            </view>
                            <view  class="w-[260rpx] flex items-center">
                                <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">联系电话</view>
                                <view class="text-[24rpx] text-[#666] font-normal">13112312312</view>
                            </view>
                        </view>
                    </view>
                    <view v-else-if="item.shipType == 0 && item.status == 2" class="bg-[#EDF7FF] rounded-[16rpx] py-[26rpx] flex justify-center">
                        <image src="../static/saoma.png" mode="scaleToFill" class="w-[40rpx] h-[40rpx] block mr-[16rpx]"/>
                        <view class="text-[24rpx] color-[#333] font-normal">扫码核销</view>
                    </view>
                </view>
            </view>
            <!-- <view class="m-[30rpx] bg-[#fff] px-[30rpx] rounded-[16rpx]">
                <view class="pt-[30rpx] pb-[20rpx]">
                    <view class="flex items-center justify-between mb-[20rpx]">
                        <view class="flex items-center">
                            <view class="text-[22rpx] text-[#878787] font-normal mr-[4rpx]">订单编码：</view>
                            <view class="text-[22rpx] text-[#333] font-normal">36882749710330003</view>
                            <view class="py-[10rpx] px-[14rpx] bg-[#F7F8FA] rounded-[40rpx] text-[18rpx] text-[#333] font-noraml">复制</view>
                        </view>
                        <view class="text-[22rpx] text-[#999] font-normal">召唤中</view>
                    </view>
                <view class="text-[18rpx] text-[#878787] font-normal">2024-04-08 24:59:59</view>
            </view>
            <up-line></up-line>
            <view class="pb-[30rpx]">
                <view class="flex items-center pt-[20rpx] pb-[24rpx]">
                    <view class="text-[30rpx] text-[#000] font-bold mr-[16rpx]">下单店铺名称</view>
                    <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">商家收入</view>
                    <view class="text-[24rpx] text-[#666] font-normal">￥180</view>
                </view>
                <view class="flex items-center mb-[30rpx]">
                    <image src="../static/address.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block mr-[8rpx]"/>
                    <view class="text-[24rpx] text-[#999] font-normal">上海市 嘉定区 南翔镇 陈翔路698号5号楼3楼</view>
                </view>
                <view class="flex justify-between items-center p-[12rpx] bg-[#F7F8FA] rounded-[16rpx] mb-[20rpx]">
                    <view class="flex items-center">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" class="w-[60rpx] h-[60rpx] block mr-[12rpx] rounded-[30rpx]"/>
                        <view class="text-[24rpx] text-[#333] font-normal mr-[20rpx]">下单人昵称</view>
                        <view class="text-[24rpx] text-[#666] font-normal mr-[8rpx]">实付金额</view>
                        <view class="text-[24rpx] text-[#666] font-normal">￥200</view>
                    </view>
                    <view class="text-[24rpx] text-[#333] font-normal">订单详情></view>
                </view>
                <view class="bg-[#F7F8FA] rounded-[16rpx] py-[30rpx] px-[30rpx] flex justify-between">
                    <view class="flex items-center">
                        <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">骑手配送费</view>
                        <view class="text-[24rpx] text-[#46a7fd] font-normal">￥8</view>
                    </view>
                </view>
            </view>
            </view>
            <view class="m-[30rpx] bg-[#fff] px-[30rpx] rounded-[16rpx]">
            <view class="pt-[30rpx] pb-[20rpx]">
                <view class="flex items-center justify-between mb-[20rpx]">
                    <view class="flex items-center">
                        <view class="text-[22rpx] text-[#878787] font-normal mr-[4rpx]">订单编码：</view>
                        <view class="text-[22rpx] text-[#333] font-normal">36882749710330003</view>
                        <view class="py-[10rpx] px-[14rpx] bg-[#F7F8FA] rounded-[40rpx] text-[18rpx] text-[#333] font-noraml">复制</view>
                    </view>
                    <view class="text-[22rpx] text-[#999] font-normal">接单中 </view>
                </view>
                <view class="text-[18rpx] text-[#878787] font-normal">2024-04-08 23:59:59</view>
            </view>
            <up-line></up-line>
            <view class="pb-[30rpx]">
                <view class="flex items-center pt-[20rpx] pb-[24rpx]">
                    <view class="text-[30rpx] text-[#000] font-bold mr-[16rpx]">下单店铺名称</view>
                    <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">商家收入</view>
                    <view class="text-[24rpx] text-[#666] font-normal">￥180</view>
                </view>
                <view class="flex items-center mb-[30rpx]">
                    <image src="../static/address.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block mr-[8rpx]"/>
                    <view class="text-[24rpx] text-[#999] font-normal">上海市 嘉定区 南翔镇 陈翔路698号5号楼3楼</view>
                </view>
                <view class="flex justify-between items-center p-[12rpx] bg-[#F7F8FA] rounded-[16rpx] mb-[20rpx]">
                    <view class="flex items-center">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" class="w-[60rpx] h-[60rpx] block mr-[12rpx] rounded-[30rpx]"/>
                        <view class="text-[24rpx] text-[#333] font-normal mr-[20rpx]">下单人昵称</view>
                        <view class="text-[24rpx] text-[#666] font-normal mr-[8rpx]">实付金额</view>
                        <view class="text-[24rpx] text-[#666] font-normal">￥200</view>
                    </view>
                    <view class="text-[24rpx] text-[#333] font-normal">订单详情></view>
                </view>
                <view class="bg-[#F7F8FA] rounded-[16rpx] py-[30rpx] px-[30rpx]">
                    <view class="flex justify-between mb-[20rpx]">
                        <view class="w-[260rpx] flex items-center">
                            <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">骑手配送费</view>
                            <view class="text-[24rpx] text-[#46a7fd] font-bold">￥8</view>
                        </view>
                        <view class="w-[260rpx] flex items-center">
                            <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">配送状态</view>
                            <view class="text-[24rpx] text-[#46a7fd] font-normal">配送中</view>
                        </view>
                    </view>
                    <view class="flex justify-between">
                        <view class="w-[260rpx] flex items-center">
                            <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">接单人</view>
                            <view class="text-[24rpx] text-[#666] font-normal">XXX</view>
                        </view>
                        <view  class="w-[260rpx] flex items-center">
                            <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">联系电话</view>
                            <view class="text-[24rpx] text-[#666] font-normal">13112312312</view>
                        </view>
                    </view>
                </view>
            </view>
            </view>
            <view class="m-[30rpx] bg-[#fff] px-[30rpx] rounded-[16rpx]">
            <view class="pt-[30rpx] pb-[20rpx]">
                <view class="flex items-center justify-between mb-[20rpx]">
                    <view class="flex items-center">
                        <view class="text-[22rpx] text-[#878787] font-normal mr-[4rpx]">订单编码：</view>
                        <view class="text-[22rpx] text-[#333] font-normal">36882749710330003</view>
                        <view class="py-[10rpx] px-[14rpx] bg-[#F7F8FA] rounded-[40rpx] text-[18rpx] text-[#333] font-noraml">复制</view>
                    </view>
                    <view class="text-[22rpx] text-[#999] font-normal">已发货</view>
                </view>
                <view class="text-[18rpx] text-[#878787] font-normal">2024-04-08 23:59:59</view>
            </view>
            <up-line></up-line>
            <view class="pb-[30rpx]">
                <view class="flex items-center pt-[20rpx] pb-[24rpx]">
                    <view class="text-[30rpx] text-[#000] font-bold mr-[16rpx]">下单店铺名称</view>
                    <view class="text-[24rpx] text-[#333] font-normal mr-[8rpx]">商家收入</view>
                    <view class="text-[24rpx] text-[#666] font-normal">￥180</view>
                </view>
                <view class="flex items-center mb-[30rpx]">
                    <image src="../static/address.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block mr-[8rpx]"/>
                    <view class="text-[24rpx] text-[#999] font-normal">上海市 嘉定区 南翔镇 陈翔路698号5号楼3楼</view>
                </view>
                <view class="flex justify-between items-center p-[12rpx] bg-[#F7F8FA] rounded-[16rpx] mb-[20rpx]">
                    <view class="flex items-center">
                        <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" class="w-[60rpx] h-[60rpx] block mr-[12rpx] rounded-[30rpx]"/>
                        <view class="text-[24rpx] text-[#333] font-normal mr-[20rpx]">下单人昵称</view>
                        <view class="text-[24rpx] text-[#666] font-normal mr-[8rpx]">实付金额</view>
                        <view class="text-[24rpx] text-[#666] font-normal">￥200</view>
                    </view>
                    <view class="text-[24rpx] text-[#333] font-normal">订单详情></view>
                </view>
                <view class="bg-[#F7F8FA] rounded-[16rpx] py-[30rpx] px-[30rpx] flex items-center">
                    <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">快递信息</view>
                    <view class="text-[24rpx] text-[#666] font-normal">sdasdhjkhkfasd</view>
                </view>
            </view>
            </view> -->
        </template>
        <up-popup :show="show" @close="close" @open="open" mode="center" round="36rpx">
            <view class="w-[510rpx] h-[392rpx] rounded-[36rpx] bbg">
                <image src="../static/ksfh.png" mode="scaleToFill" class="w-[510rpx] h-[120rpx] block mb-[44rpx]"/>
                <view class="mb-[52rpx] py-[20rpx] mx-[40rpx] border-[1rpx] border-[#46A7FD] rounded-[80rpx] bg-[#DAEDFF]">
                    <up-input v-model="shipSn" placeholder="请输入快递单号" border="none" clearable inputAlign="center"></up-input>
                </view>
                <view class="flex px-[32rpx] justify-between">
                    <view @click="closePopup" class="text-[26rpx] text-[#c6cacd] font-normal py-[18rpx] px-[74rpx] bg-[#F2F3F5] rounded-[40rpx]">取消</view>
                    <view @click="DeliverGoods" class="text-[26rpx] text-[#ffffff] font-normal py-[18rpx] px-[74rpx] bg-[#46A7FD] rounded-[40rpx]">发货</view>
                </view>
            </view> 
		</up-popup>
        <up-popup :show="show1" @close="close" @open="open" mode="center" round="36rpx">
            <view class="w-[510rpx] h-[392rpx] rounded-[36rpx] bbg">
                <image src="../static/tzhqs.png" mode="scaleToFill" class="w-[510rpx] h-[120rpx] block mb-[44rpx]"/>
                <view class="mb-[16rpx] py-[20rpx] mx-[40rpx] border-[1rpx] border-[#46A7FD] rounded-[80rpx] bg-[#DAEDFF]">
                    <up-input placeholder="请输入配送费" border="none" clearable inputAlign="center"></up-input>
                </view>
                <view class="text-center text-[22rpx] text-[#999] font-normal mb-[48rpx]">*是否召唤骑手配送，骑手接单后不可取消</view>
                <view class="flex px-[32rpx] justify-between">
                    <view class="text-[26rpx] text-[#c6cacd] font-normal py-[18rpx] px-[74rpx] bg-[#F2F3F5] rounded-[40rpx]">取消</view>
                    <view class="text-[26rpx] text-[#ffffff] font-normal py-[18rpx] px-[74rpx] bg-[#46A7FD] rounded-[40rpx]">发货</view>
                </view>
            </view>
		</up-popup>
    </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { MerchantDelivery, MerchantOrderQuery, MerchantWriteOff, ShopIncome } from '../../API/ReceivingHall';
const { goback , gohome } = useTab();
const { ScanQRCodes , checkShow , DeliverGoods , closePopup , toLink } = useBtns();
const { Stores , BusinessIncome , statusType , current, show, show1, list, tabcheck , pageObj , orderList , GetOrderList , orderId , shipSn } = useList();
function useTab(){
    const goback = ()=>{
        uni.navigateBack()
    }
    const gohome = ()=>{
        uni.switchTab({ url: '/pages/index/index' })
    }
    return {
        goback,
        gohome
    }
}
function useList(){
    const pageObj = reactive({
        pageNum:1,
        pageSize:10,
        type:1
    })
    const current = ref(1)
    const show = ref(false)
    const show1 = ref(false)
    const list = reactive([{ 
            name:'待发货',
            value:1
        },{
            name:'待自提',
            value:2
        },{
            name:"接单中",
            value:3
        },{
            name:'已发货',
            value:4
        },{
            name:'已完成',
            value:5
    }])
    const shipSn = ref('')
    const num = ref(0)
    const orderId = ref(null)                                   
    const orderList = ref([])
    const Stores = ref({})
    const tabcheck = async (value)=>{
        current.value = value
        pageObj.type = value
        await GetOrderList()
    }
    const GetOrderList = async () => {
        let { rows , total } = await MerchantOrderQuery(pageObj)
        orderList.value = rows 
        num.value = total
    }
    const statusType = computed(() => (status) => {
        return status == 0 ? '待自提' : status == 1 ? '待发货' : status == 2 ? '召唤中' : status == 3 ? '接单中' : status == 4 ? '已发货' : '已完成'
    })
    const BusinessIncome = async ()=>{
        let { data } = await ShopIncome()
        Stores.value = data
    }
    return {
        current,
        show,
        show1,
        list,
        orderId,
        tabcheck,
        pageObj,
        shipSn,
        orderList,
        GetOrderList,
        statusType,
        BusinessIncome,
        Stores
    }                       
}
function useBtns(){
    const ScanQRCodes = ()=>{
        uni.scanCode({
            success:async(res)=>{
                let id = res.path.split('=')[1]
                let {data} = await MerchantWriteOff(id)
                await GetOrderList()
            }
        })
    }
    const checkShow = (id)=>{   
        orderId.value = id
        show.value = !show.value
    }
    const DeliverGoods =  ()=>{
        // console.log('123123123123')
        MerchantDelivery({
            orderId:orderId.value,
            shipSn:shipSn.value
        }).then( async (res)=>{
            show.value = !show.value
            orderId.value = 0
            await GetOrderList()
        })
    }
    const closePopup = ()=>{
        show.value =  !show.value
        orderId.value = 0
    }
    const toLink = ()=>{
        uni.navigateTo({
            url:`/community/purse/purse?resource=${1}`
        })
    }
    return { ScanQRCodes  , checkShow , DeliverGoods , closePopup , toLink }
}

onLoad(async ()=>{
    await BusinessIncome()
    await GetOrderList()
})
</script>

<style lang="scss" scoped>
.blurBg{
    min-height: 100vh;
    background: linear-gradient( 180deg, #EBF4FB 0%, #F9F9FB 100%);
}
.BgBlur{
    height:164rpx;
    padding: 8rpx 0;
    margin: 0 30rpx;
    border-radius: 16rpx;
    background: linear-gradient( 180deg, #98CFFF 0%, #46A7FD 100%);
}
.tm{
    height: 148rpx;
    border-radius: 16rpx;
    background-color: rgba($color: #ffffff, $alpha: 0.16);
}
.active{
    background-color: #46A7FD;
    color: #fff;
}
.bbg{
    background: linear-gradient( 180deg, rgba(70,167,253,0.6) 0%, rgba(70,167,253,0) 47%);
}
</style>